import './App.scss';
import logo from './logo.svg'
import Input from './components/Input';
import Child from './components/Child';
//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件

import React, { Component } from 'react';
// import Child from './component/Child'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      currentIndex:0,
      arr:[ //一级分类数组
        {
          name:'活动专区',
          list:[
            {name:'商品1',pic:logo},
            {name:'商品2',pic:logo},
            {name:'商品3',pic:logo},
            {name:'商品4',pic:logo},
            {name:'商品5',pic:logo},
            {name:'商品6',pic:logo},
          ]
        },
        {
          name:'品牌',
          list:[
            {name:'品牌1',pic:logo},
            {name:'品牌2',pic:logo},
            {name:'品牌3',pic:logo},
            {name:'品牌4',pic:logo},
            {name:'品牌5',pic:logo},
            {name:'品牌6',pic:logo},
          ]
        },
        {
          name:'美容护肤',
          list:[
            {name:'美容护肤1',pic:logo},
            {name:'美容护肤2',pic:logo},
            {name:'美容护肤3',pic:logo},
            {name:'美容护肤4',pic:logo},
            {name:'美容护肤5',pic:logo},
            {name:'美容护肤6',pic:logo},
          ]
        },
        {
          name:'彩妆',
          list:[
            {name:'彩妆1',pic:logo},
            {name:'彩妆2',pic:logo},
            {name:'彩妆3',pic:logo},
            {name:'彩妆4',pic:logo},
            {name:'彩妆5',pic:logo},
            {name:'彩妆6',pic:logo},
          ]
        },
        {
          name:'香水',
          list:[
            {name:'香水1',pic:logo},
            {name:'香水2',pic:logo},
            {name:'香水3',pic:logo},
            {name:'香水4',pic:logo},
            {name:'香水5',pic:logo},
            {name:'香水6',pic:logo},
          ]
        },
        {
          name:'酒类',
          list:[
            {name:'酒类1',pic:logo},
            {name:'酒类2',pic:logo},
            {name:'酒类3',pic:logo},
            {name:'酒类4',pic:logo},
            {name:'酒类5',pic:logo},
            {name:'酒类6',pic:logo},
          ]
        },
        {
          name:'腕表首饰',
          list:[
            {name:'腕表首饰1',pic:logo},
            {name:'腕表首饰2',pic:logo},
            {name:'腕表首饰3',pic:logo},
            {name:'腕表首饰4',pic:logo},
            {name:'腕表首饰5',pic:logo},
            {name:'腕表首饰6',pic:logo},
          ]
        },
        {
          name:'服饰箱包',
          list:[
            {name:'服饰箱包1',pic:logo},
            {name:'服饰箱包2',pic:logo},
            {name:'服饰箱包3',pic:logo},
            {name:'服饰箱包4',pic:logo},
            {name:'服饰箱包5',pic:logo},
            {name:'服饰箱包6',pic:logo},
          ]
        },
        {
          name:'食品保健',
          list:[
            {name:'食品保健1',pic:logo},
            {name:'食品保健2',pic:logo},
            {name:'食品保健3',pic:logo},
            {name:'食品保健4',pic:logo},
            {name:'食品保健5',pic:logo},
            {name:'食品保健6',pic:logo},
          ]
        },
      ]
    }
  }

  handleClick(index){
    //setState() 更新组件状态
    //setState() 会将传入的参数属性和原有的组件state进行合并
    //setState() 会触发组件更新, 组件更新时当前组件的render方法会立即重新执行,render方法内的所有js代码都会重新执行.

    // this.state.currentIndex = index; 这样无法触发组件更新

    //特点: 只要调用setState 当前组件一定更新(render方法调用了)
    //特点: 只要调用setState 对当前组件状态更新是异步的, 不能在setState之后立即获取state最新的值, 想要获取只能在setState的第二个参数的回调函数中获取.
    this.setState({
      currentIndex:index
    },()=>{
      console.log(this.state.currentIndex);
    })
    //console.log(this.state.currentIndex); 不要在这里获取state最新的值, 因为获取不到
  }

  render() {
    return (
      <>
      <Input></Input>
        <div className='app'>
          
          <div className="div left">
            {
              // onClick={函数}
              this.state.arr.map((item,index)=>{
                return (
                  // 事件绑定
                  // onClick={function(){}}
                  // onClick={()=>{}}
                  // onClick={this.handleClick}

                  // 事件绑定,解决this指向问题
                  // onClick={function(){}.bind(this)}
                  // onClick={()=>{}}
                  // onClick={this.handleClick.bind(this)}

                  // 事件绑定,事件处理函数传参
                  // onClick={function(){  }}
                  // onClick={()=>{ }}
                  // onClick={()=>{ this.handleClick(index) }}

                  // style绑定 style={{}}
                  // <div className="btn" style={{color: this.state.currentIndex == index ? 'red' : '',backgroundColor: this.state.currentIndex == index ? 'gray' : '', fontWeight: this.state.currentIndex == index ? 'bold' : '' }} onClick={ ()=>{  

                  //class绑定 className={}
                  // <div className={`btn ${this.state.currentIndex == index ? 'active':''}` }   onClick={ ()=>{  

                  <div className={`btn ${this.state.currentIndex == index ? 'active':''}` }   onClick={ ()=>{  
                      this.handleClick(index)  
                    } }>{item.name}</div>
                )
              })
            }
          </div> 
         
          <div className="right">
         
            
            {
              
              //渲染右侧列表
              this.state.arr[this.state.currentIndex].list.map((item,index)=>{
                //sfkshdfkhsdfkh
                return (
                  <div className="item">
                    <img src={item.pic} alt="" />
                    <div className="name">{item.name}</div>
                  </div>
                )
              })
            }
          </div>

        </div>

      </>
    );
  }
}

export default App;